<!doctype html>
<html lang="ja">
 <head> 
  <meta charset="UTF-8"> 
  <title>书法家分类</title> 
  <link rel="Shortcut Icon" type="image/x-icon" href="css/favicon.ico"> 
  <link rel="apple-touch-icon-precomposed" href="css/clip_icon.png"> 
  <link rel="stylesheet" type="text/css" href="css/layout.css"> 
  <link rel="stylesheet" type="text/css" href="css/general.css"> 
  <link rel="stylesheet" type="text/css" href="css/index.css"> 
  <link href="css/css" rel="stylesheet"> 
  <link rel="stylesheet" href="./elementui/index.css">
  <script src="./js/vue.js"></script>
  <script src="./js/elment.js"></script>
  <style>
    .name {
      margin: 10px;
      font-weight: bold;
    }
    .text {
      margin: 10px;
      font-weight: bold;
    }
  </style>
 </head> 
 <body> 
  <div id="app">
    
    <el-dialog
      title="书法家详情"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
        <div>
          <img style="width: 100%;" :src="currentSFJ.img" alt="">
          <div class="name wryh">{{ currentSFJ.name }}</div>
          <div class="text wryh">{{ currentSFJ.text }}</div>
        </div>
      <span slot="footer" class="dialog-footer">
        <el-button style="background: #000;border-color: #000;" size="mini" type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  <div id="container"> 
    <header id="gHeader"> 
     <div class="logo">
      <a href="index.html"><img src="images/logo.png" alt="书法历史长河"></a>
     </div> 
     <div class="menu">
      <a href="#"><img src="images/menu.png" alt=""></a>
     </div> 
    </header> 
    <div class="menuBox"> 
     <div class="menuContent"> 
      <div class="close">
       <a href="#"><img src="images/close.png" alt=""></a>
      </div> 
      <p>选择</p> 
      <ul class="menuUl"> 
       <li><a href="#"><img src="images/imgtext01.png" alt="ABOUTus"><span>关于我们</span></a></li> 
       <li><a href="./3.html"><img src="images/imgtext02.png" alt="works"><span>作品合集</span></a></li> 
      </ul> 
     </div> 
    </div> 
    <section id="main" style="margin-top: 40px;"> 
     <div class="mainBox"> 
      <ul class="txtList target"> 
        <li class="on"><a href="javascript:void(0);">书法家</a>|</li> 
        <li class="off"><a href="3.html">作品内容</a>|</li> 
        <li class="off"><a href="5.html">趣味知识</a>|</li> 
        <li class="off"><a href="6.html">可视化表</a>|</li> 
        <li class="off"><a href="7.html">论坛</a></li> 
      </ul> 
      <ul class="photoList clearfix target"> 
       <li @click="showSFJDetail(item)" v-for="item in sfjList"><a href="#"><span class="comHover01"><span class="subComHover01"><img src="images/lazy_dummy.png" :data-echo="item.img" alt="" class="object-fit-img echo-img" width="182"></span></span><span class="txt wryh">{{item.name}}</span></a> </li> 
      </ul> 
     </div> 
    </section> 
    <footer id="gFooter" class="clearfix"> 
     <div class="bg"> 
      
      
      <div class="fBox"> 
       <div class="pageTop">
        <a href="#"><img src="images/page_top.gif" alt="" class="pc"><img src="images/sp_page_top.gif" alt="" class="sp"></a>
       </div> 
      
      </div> 
     </div> 
    </footer> 
   </div> 
  </div>
  <script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
              sfjList: [],
              dialogVisible: false,
              currentSFJ: {}
            }
        },
        mounted() {
            this.getSFJ()
        },
        methods: {
            getSFJ() {
              fetch('/sfj/get', {
                  method: "POST",
                  body: JSON.stringify({
                    page: 1,
                    pageSize: 1000
                  }),
                  headers: {
                      "Content-Type": "application/json",
                      "Accept": "application/json"
                  },
              }).then((response) => {
                  return response.json().then((res) => {
                    this.sfjList = res.data;
                    console.log(this.sfjList)
                  })
              })
          },
          showSFJDetail(data) {
            console.log(data)
            this.currentSFJ = data;
            this.dialogVisible = true
          },
          handleClose() {
            this.dialogVisible = false
          }
        }
    })
  </script>
  <script src="js/jquery.min.js"></script> 
  <script src="js/iscroll.min.js"></script> 
  <script src="js/ofi.min.js"></script> 
  <script src="js/echo.min.js"></script> 
  <script src="js/common.js"></script> 
  <script src="js/jquery.lazyload.min.js"></script> 
  <script src="js/jquery.matchHeight-min.js"></script> 
  <script src="js/placeholder.js"></script> 
  <script src="js/artists.js"></script> 
  <script type="text/javascript">
  var sort = 'rand';
  var keyword = '';
  var ini = '';

  var code1 = '';
  var code2 = '';
  var code3 = '';
  var code4 = '';
  var code5 = '';
   

  
  $(function() {
	  if(code1 != ''){
		 var txt = $('#code1 li').filter(function(){
			 return $(this).attr('id') == code1;
		 }).html();
		 $('#code1').prev().find('.txt02').html(txt);
	  }
    $('#code1 li').click(function(){
      var code1 = $(this).attr("id");
      document.form.code1.value=code1;
      document.form.code2.value=code2;
      document.form.code3.value=code3;
      document.form.code4.value=code4;
      document.form.code5.value=code5;
      document.form.sort.value=sort;
      document.form.keyword.value=keyword;
      document.form.ini.value=ini;
      document.form.submit();
    });
  });
  $(function() {
	  if(code2 != ''){
		 var txt = $('#code2 li').filter(function(){
			 return $(this).attr('id') == code2;
		 }).html();
		 $('#code2').prev().find('.txt02').html(txt);
	  }
    $('#code2 li').click(function(){
      var code2 = $(this).attr("id");
      document.form.code1.value=code1;
      document.form.code2.value=code2;
      document.form.code3.value=code3;
      document.form.code4.value=code4;
      document.form.code5.value=code5;
      document.form.sort.value=sort;
      document.form.keyword.value=keyword;
      document.form.ini.value=ini;
      document.form.submit();
    });
  });
  $(function() {
	  if(code3 != ''){
		 var txt = $('#code3 li').filter(function(){
			 return $(this).attr('id') == code3;
		 }).html();
		 $('#code3').prev().find('.txt02').html(txt);
	  }
    $('#code3 li').click(function(){
      var code3 = $(this).attr("id");
      document.form.code1.value=code1;
      document.form.code2.value=code2;
      document.form.code3.value=code3;
      document.form.code4.value=code4;
      document.form.code5.value=code5;
      document.form.sort.value=sort;
      document.form.keyword.value=keyword;
      document.form.ini.value=ini;
      document.form.submit();
    });
  });
  $(function() {
	  if(code4 != ''){
		 var txt = $('#code4 li').filter(function(){
			 return $(this).attr('id') == code4;
		 }).html();
		 $('#code4').prev().find('.txt02').html(txt);
	  }
    $('#code4 li').click(function(){
      var code4 = $(this).attr("id");
      document.form.code1.value=code1;
      document.form.code2.value=code2;
      document.form.code3.value=code3;
      document.form.code4.value=code4;
      document.form.code5.value=code5;
      document.form.sort.value=sort;
      document.form.keyword.value=keyword;
      document.form.ini.value=ini;
      document.form.submit();
    });
  });
  $(function() {
	  if(code5 != ''){
		 var txt = $('#code5 li').filter(function(){
			 return $(this).attr('id') == code5;
		 }).html();
		 $('#code5').prev().find('.txt02').html(txt);
	  }
    $('#code5 li').click(function(){
      var code5 = $(this).attr("id");
      document.form.code1.value=code1;
      document.form.code2.value=code2;
      document.form.code3.value=code3;
      document.form.code4.value=code4;
      document.form.code5.value=code5;
      document.form.sort.value=sort;
      document.form.keyword.value=keyword;
      document.form.ini.value=ini;
      document.form.submit();
    });
  });
</script> 
  
<!--异步加载部分-->
  <script async src="js/js"></script> 
 
 </body>
</html>